<template>
  <div class="back-formatter">
    <fame-header/>
    <div class="gap-formatter"></div>
    <div class="container">
      <transition name="flow" mode="out-in">
        <nuxt/>
      </transition>
    </div>
    <fame-scroll-top/>
    <div class="gap-formatter"></div>
    <fame-footer/>
  </div>
</template>

<script>
  import FameHeader from '~/components/Header.vue'
  import FameFooter from '~/components/Footer.vue'
  import FameScrollTop from '~/components/ScrollTop.vue'

  export default {
    components: {
      FameHeader,
      FameFooter,
      FameScrollTop
    }
  }
</script>

<style>
  .container {
    padding: 30px 30px 50px 30px;
    margin-top: 85px;
    height: 100%;
    max-width: 100%;
    font-size: 16px;
    position: relative;
    margin-left: calc(15%);
    margin-right: calc(15%);
    background-color: white;
    border-radius: 10px;
    min-height: calc(70%);
  }
  .back-formatter {
    background-color: #f7f8fa;
  }
  .gap-formatter{
    height: 20px;
  }
</style>
